<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Distribuição
        </ui:define>

        <ui:define name="content">
            <h:form id="criarDistribuicaoForm">            

                <p:messages id="criarDistribuicaoMessages" autoUpdate="true" />

                <p:fieldset legend="Dados do Recebedor" id="recebedorPanel" >
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Recebedor" for="recebedorAutoComplete" />
                        </div>
                        <div class="column4">
                            <p:autoComplete id="recebedorAutoComplete" value="#{ managerCriarDistribuicao.distribuicao.recebedor }"
                                            forceSelection="true" dropdown="true" var="recebedor" itemValue="#{ recebedor }" 
                                            itemLabel="#{ recebedor.nome }" completeMethod="#{ managerCriarDistribuicao.autocompletarUsuario }"
                                            converter="conversorusuario" minQueryLength="3" required="true" requiredMessage="Recebedor é obrigatório" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Comentário" for="comentarioInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="comentarioInputTextarea" value="#{ managerCriarDistribuicao.distribuicao.comentario }" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Distribuição de Selos" id="distribuicaoPanel" >
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo de Selo" for="tipoSeloAutoComplete" />
                        </div>
                        <div class="column4">
                            <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerCriarDistribuicao.distribuicaoItem.tipoSelo }"
                                            forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                            itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerCriarDistribuicao.autocompletarTipoSelo }"
                                            converter="conversortiposelo" minQueryLength="3" required="true" requiredMessage="Tipo de Selo é obrigatório">
                                <p:column>
                                    <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                </p:column>
                                <p:column>#{ tipoSelo.nome }</p:column>
                            </p:autoComplete>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Quantidade" for="quantidadeInputText" />
                        </div>
                        <div class="column2">
                            <p:inputText id="quantidadeInputText" value="#{ managerCriarDistribuicao.distribuicaoItem.quantidade }"
                                         required="true" requiredMessage="Quantidade é obrigatório" />
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton value="Adicionar" icon="ui-icon-plus" oncomplete="widthFix();" actionListener="#{ managerCriarDistribuicao.adicionarDistribuicao() }"
                                         update=":criarDistribuicaoForm:distribuicaoPanel, :criarDistribuicaoForm:distribuirCommandButton" process=":criarDistribuicaoForm:distribuicaoPanel" />
                        <p:commandButton value="Limpar" icon="ui-icon-close" actionListener="#{ managerCriarDistribuicao.limpar() }"
                                         update=":criarDistribuicaoForm:distribuicaoPanel" process="@this" oncomplete="widthFix();"
                                         disabled="#{ managerCriarDistribuicao.distribuicaoItem.id != null }" />
                    </div>

                    <p:dataTable id="detalheEntradaSeloDataTable" var="distribuicao" value="#{ managerCriarDistribuicao.distribuicaoItens }"
                                 styleClass="grid_24" emptyMessage="Nenhum item adicionado">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">                                
                                <p:commandButton icon="ui-icon-pencil" oncomplete="widthFix();"
                                                 actionListener="#{ managerCriarDistribuicao.editarDistribuicao(distribuicao) }"
                                                 update=":criarDistribuicaoForm:distribuicaoPanel" process="@this" />
                                <p:commandButton icon="ui-icon-trash" oncomplete="widthFix();"
                                                 actionListener="#{ managerCriarDistribuicao.removerDistribuicao(distribuicao) }"
                                                 update=":criarDistribuicaoForm:detalheEntradaSeloDataTable, :criarDistribuicaoForm:distribuirCommandButton"
                                                 process="@this" />
                            </div>
                        </p:column>                            
                        <p:column headerText="Tipo de Selo" width="55%">
                            <h:outputText value="#{ distribuicao.tipoSelo.nome }" />
                        </p:column>
                        <p:column headerText="Cor do Selo" width="20%">
                            <div class="color" style="background: \##{ distribuicao.tipoSelo.corSelo }"></div>
                        </p:column>
                        <p:column headerText="Quantidade" width="20%">
                            <h:outputText value="#{ distribuicao.quantidade }" />
                        </p:column>                            
                    </p:dataTable>

                </p:fieldset>

                <div class="command">
                    <p:commandButton value="Distribuir" oncomplete="widthFix();" id="distribuirCommandButton" icon="ui-icon-shuffle" onclick="dialogDistribuicao.show();"
                                     actionListener="#{ managerCriarDistribuicao.distribuir() }"
                                     process="@this" update="@this, :criarDistribuicaoForm:selosDataTable" immediate="true"
                                     disabled="#{ managerCriarDistribuicao.distribuicaoItens.size() == 0 }" />
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarDistribuicao.xhtml" />
                </div>

                <p:dialog id="atoTipoDialog" widgetVar="dialogDistribuicao" header="Confirmar distribuição" dynamic="true" modal="true" appendToBody="false"
                          resizable="false" width="50%" height="450px" draggable="false" closable="true">

                    <p:dataTable id="selosDataTable" var="item" value="#{ managerCriarDistribuicao.distribuicaoItens }"
                                 rows="20" paginator="true" paginatorPosition="bottom">

                        <p:subTable var="selo" value="#{ item.selos }">

                            <f:facet name="header">
                                <div>
                                    <div class="color" style="background: \##{ item.tipoSelo.corSelo }; float: left; width: 10%"></div>
                                    <div style="float: left; padding: 5px; width: 90%">#{ item.tipoSelo.nome }</div>
                                </div>
                                <div style="clear: left; float: left; width: 50%">
                                    <h:outputLabel value="Número" />
                                </div>
                                <div style="float: left; width: 50%">
                                    <h:outputLabel value="Serie" />
                                </div>
                            </f:facet>

                            <p:column>
                                #{ selo.numero }
                            </p:column>
                            <p:column>
                                #{ selo.serie }
                            </p:column>

                        </p:subTable>                        
                    </p:dataTable>

                    <div class="command">
                        <p:commandButton value="Confirmar" actionListener="#{ managerCriarDistribuicao.salvar() }"
                                         update="@form" icon="ui-icon-disk" oncomplete="widthFix(); dialogDistribuicao.hide();"
                                         process="@this, :criarDistribuicaoForm:recebedorPanel" />
                        <p:commandButton value="Cancelar" icon="ui-icon-cancel" onclick="dialogDistribuicao.hide()" process="@this"
                                         update="criarDistribuicaoForm:atoTipoDialog" />
                    </div>

                </p:dialog>

            </h:form>
        </ui:define>
    </ui:composition>

</html>